<template>
	<view class="main-page">
		<u-navbar title="下单" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="swiper-container">
			<u-swiper :list="banners"  keyName="image" height="360" radius="0"></u-swiper>
		</view>
		<view class="warp">
			<u-gap height="180" ></u-gap>
			<view class="form">
				<u--form labelPosition="left" :model="formData" labelWidth="80" :rules="rules" ref="uForm" >
					<u-form-item label="下单类型" prop="type" borderBottom >
						<u-radio-group v-model="formData.type" placement="row" @change="groupChange">
						    <u-radio activeColor="#fdca00" label="样板单" name="1"></u-radio>
							<u-radio activeColor="#fdca00" label="大货单" name="2" style="margin-left: 40rpx;"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="款号" prop="product_no" borderBottom >
						<u--input v-model="formData.product_no" border="none" placeholder="请输入款号"></u--input>
					</u-form-item>
					<u-form-item label="数量" prop="num" borderBottom >
						<u--input type="number" v-model.number="formData.num" border="none" placeholder="请输入数量"></u--input>
					</u-form-item>
					<u-form-item label="类型" prop="category_id" borderBottom @tap="showCategory">
						<text v-if="selectShow.category_id">{{selectShow.category_id}}</text>
						<text v-else class="">请选择类型</text>
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</u-form-item>
					<u-form-item label="印花位置" prop="img_position" borderBottom >
						<u--textarea v-model="formData.img_position" placeholder="请输入印花位置" ></u--textarea>
					</u-form-item>
					<u-form-item label="转色说明" prop="color_remark" borderBottom >
						<u--textarea v-model="formData.color_remark" placeholder="请输入转色说明" ></u--textarea>
					</u-form-item>
					<u-form-item label="注意事项" prop="tips" borderBottom >
						<u--textarea v-model="formData.tips" placeholder="请输入注意事项" ></u--textarea>
					</u-form-item>
					<u-form-item label="图片" prop="images" borderBottom >
						<u-upload
							:fileList="images"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:previewFullImage="true"
							:maxCount="10"
						></u-upload>
					</u-form-item>
					<u-form-item label="备注" prop="remark" borderBottom >
						<u--textarea v-model="formData.remark" placeholder="请输入备注" ></u--textarea>
					</u-form-item>
					<view class="btn-item">
						<u-button class="bg-linear-main" type="primary" shape="circle" text="确定" @tap="submit"></u-button>
					</view>
				</u--form>
			</view>
		</view>
		<u-action-sheet
			:show="showModal == 'category'"
			:actions="categorys"
			title="请选择类型"
			@close="showModal = ''"
			@select="categoryChange"
		>
		</u-action-sheet>
	</view>
</template>

<script>
	import { get_banner, productCategory, subOrder } from '@/common/api.js'
	import upload from '@/common/upload.js'
	
	export default {
		data() {
			return {
				banners: [],
				categorys: [],
				images: [],
				formData: {
					type: '1',
					product_no: '',
					num: '',
					category_id: '',
					img_position: '',
					color_remark: '',
					tips: '',
					images: '',
					remark: ''
				},
				selectShow: {
					category_id: ''
				},
				rules: {
					'product_no': {
						type: 'string',
						required: true,
						message: '请输入款号',
						trigger: ['blur', 'change']
					},
					'num': {
						type: 'number',
						required: true,
						message: '请输入数量',
						trigger: ['blur', 'change']
					},
					'category_id': {
						type: 'number',
						required: true,
						message: '请选择类型',
						trigger: ['blur', 'change']
					}
				},
				showModal: ''
			}
		},
		onLoad(params) {
			this.formData.category_id = params.cate_id ? params.cate_id : '';
			this.getBanner()
			this.getCategory()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getBanner(){
				get_banner({mark: 'add-order'}).then(res => {
					res.lists.forEach(item => {
						item.image = this.$store.state.$siteConfig.cdnUrl + item.image
					})
					this.banners = res.lists
				})
			},
			getCategory(){
				productCategory().then(res => {
					res.forEach(item => {
						item.icon = this.$store.state.$siteConfig.cdnUrl + item.icon
						item.name = item.title
					})
					this.categorys = res
					console.log('this.formData.category_id', this.formData.category_id)
					if(this.formData.category_id){
						this.selectShow.category_id = this.categorys.find(p => p.id == this.formData.category_id)['name']
					}
				})
			},
			showCategory(){
				this.showModal = 'category';
			},
			categoryChange(e){
				console.log(e)
				this.formData.category_id = e.id
				this.selectShow.category_id = e.name
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.images.length
				lists.map((item) => {
					this.images.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await upload({filePath: lists[i].url})
					let item = this.images[fileListLen]
					this.images.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.file.url
					}))
					fileListLen++
				}
			},
			deletePic(event){
				this.images.splice(event.index, 1)
			},
			groupChange(e){
				console.log(e)
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					const params = {...this.formData}
					params.images = [];
					this.images.forEach(item => {
						params.images.push(item.url)
					})
					params.images = params.images.join(',')
					uni.showLoading()
					subOrder(params).then(res => {
						uni.navigateTo({
							url: '/pages/user/order'
						})
					}).finally(() => {
						uni.hideLoading()
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper-container { position: fixed; z-index: 0;left: 0; top: 0;right: 0;}
	.warp { position: relative; z-index: 1; border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;}
	.form {
		background-color: #ffffff; padding: 20rpx; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; padding-bottom: 100rpx;
		.btn-item { position: fixed; bottom: 15rpx; left: 15rpx; right: 15rpx;}
	}
</style>
